<template>
  <ContainerContent :loading="loading" :pagination="pagination">
    <template #header>
      <CloudFilterBar
        v-model="params"
        :run="run"
        :schemes="filterSchemes"></CloudFilterBar>
    </template>
    <a-table
      ref="tableRef"
      v-model:selected-keys="selectedKeys"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      :row-selection="defaultRowSelection"
      @sorter-change="onSorterChange"
      @selection-change="onSelectChange">
      <template #address="{ record }">
        <edit-field
          :content="record.address"
          type="textarea"
          :options="[
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 }
          ]"
          field="address"
          mouse-over
          hover-table
          edit-title="修改"
          placeholder="请输入地址"
          rule-message="地址不能为空"
          :fn="fn"
          :params="{
            instance_id: record.instance_id
          }"
          href="/"
          :default-value="record.address">
        </edit-field>
      </template>
      <template #email="{ record }">
        <text-ell :content="record.email"></text-ell>
      </template>
    </a-table>
  </ContainerContent>
</template>
<script lang="ts" setup>
import ContainerContent from '@/components/ContentContainer.vue'
import type {
  CloudFilterBarScheme,
  CloudFilterBarState
} from '@/components/filter-bar/types'
import type { FilterItem } from '@/components/strong-search'
import { useTable } from '@/hooks'
import { useListRequest } from '@/hooks/useListRequest'
import {
  buildColumns,
  commonTableProps,
  defaultRowSelection
} from '@/utils/table'
const filterSchemes = computed<CloudFilterBarScheme>(() => {
  const strongSearchOptions: FilterItem[] = [
    {
      label: '实例名称',
      field: 'instance_name'
    },
    {
      label: '实例ID',
      field: 'instance_id_and_name'
    },
    {
      label: '所属用户ID',
      field: 'user_id',
      message: '用户ID格式不正确'
    },
    { label: 'IP地址', field: 'ip_address' },
    {
      label: '套餐状态',
      field: 'set_status',
      popover: 'select',
      popoverOption: {
        select: [
          { label: '正常', value: 1 },
          { label: '已到期', value: 2 },
          { label: '即将到期', value: 3 }
        ]
      }
    }
  ]
  return {
    widgets: [
      {
        widget: 'select',
        field: 'region_id',
        fieldNames: {
          value: 'id',
          label: 'name'
        },
        allText: '全部区域'
      },
      {
        widget: 'select',
        field: 'status',
        allText: '全部状态',
        // options: cloudServerStatusOptions
        options: [
          {
            label: '开启',
            value: 1
          },
          {
            label: '关闭',
            value: 2
          }
        ]
      },
      {
        widget: 'strong-search',
        placeholder: '实例名称',
        options: strongSearchOptions
      }
    ]
  }
})
const params = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'created_at'
})
const fn = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = Array(10)
        .fill(null)
        .map((_, index) => ({
          id: String(index),
          name: `User ${index + 1}`,
          address: '32 Park Road, London',
          email: `user.${index + 1}@example.comuser.${index + 1}
          @example.comuser.${index + 1}@example.comuser.${index + 1}@example.comuser.${index + 1}@example.comuser.${index + 1}@example.com`
        }))
      resolve({ list: data })
    }, 10)
  })
}
const columns = computed(() =>
  buildColumns([
    {
      title: 'Name',
      dataIndex: 'name',
      fixed: 'left',
      format: 'copy'
    },
    {
      title: 'Address',
      dataIndex: 'address',
      slotName: 'address'
    },
    {
      title: 'Email',
      dataIndex: 'email',
      width: 140,
      slotName: 'email'
    }
  ])
)
const { data, loading, run, pagination } = useListRequest(fn, {
  immediate: true
})

const { selectedKeys, onSelectChange, createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(params)
</script>
